<script setup>
import { Icon } from '@iconify/vue';
const props = defineProps({ item: Object, level: Number });

// 判断是否为MDI图标
const isMdiIcon = (icon) => {
    return icon && icon.startsWith('mdi-');
};
</script>

<template>
    <!---Single Item-->
    <v-list-item :to="item.type === 'external' ? '' : item.to" :href="item.type === 'external' ? item.to : ''" rounded
        class="mb-1 nav-item-custom ml-2" :disabled="item.disabled" :target="item.type === 'external' ? '_blank' : ''">
        <!---If icon-->
        <template v-slot:prepend>
            <!-- MDI图标 -->
            <v-icon v-if="isMdiIcon(item.icon)" :icon="item.icon" size="18" :class="'text-' + item.BgColor"></v-icon>
            <!-- Solar图标 -->
            <Icon v-else :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot"
                :class="'text-' + item.BgColor" />
        </template>
        <v-list-item-title>{{ $t(item.title || '错误路径') }}</v-list-item-title>
        <!---If Caption-->
        <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
            {{ item.subCaption }}
        </v-list-item-subtitle>
        <!---If any chip or label-->
        <template v-slot:append v-if="item.chip">
            <v-chip :color="item.chipColor" :class="'sidebarchip hide-menu bg-' + item.chipBgColor"
                :size="item.chipIcon ? 'small' : 'small'" :variant="item.chipVariant" :prepend-icon="item.chipIcon">
                {{ item.chip }}
            </v-chip>
        </template>
    </v-list-item>
</template>

<style scoped>
.nav-item-custom :deep(.v-list-item__spacer) {
    display: none !important;
}
</style>
